@display: inline-block;
* {
    margin: 0;
    padding: 0;
}

.contaninerBs {
    width: 100vw;
    height: 100%;
    background: url('../image/bg_bs.png') no-repeat;
    overflow-y: auto;
    position: relative;
    .top_bs {
        top: 0;
        width: 100%;
        position: relative;
        .title_bs {
            width: 50%;
            position: absolute;
            text-align: center;
            top: 0;
            left: 50%;
            margin-left: -25%;
            @media screen and(min-width: 1280px) {
                span {
                    font-size: 25px;
                }
                p {
                    font-size: 19px;
                    line-height: 24px;
                }
            }
            @media screen and(min-width: 1366px) {
              span {
                  font-size: 28px;
              }
              p {
                  font-size: 22px;
                  line-height: 22px;
              }
          }
          @media screen and(min-width: 1440px) {
            span {
                font-size: 30px;
            }
            p {
                font-size: 24px;
                line-height: 19px;
            }
        }
        @media screen and(min-width: 1680px) {
          span {
              font-size: 35px;
          }
          p {
              font-size: 26px;
              line-height: 30px;
          }
      }
      @media screen and(min-width: 1920px) {
        span {
            font-size: 35px;
        }
        p {
            font-size: 26px;
            line-height: 42px;
        }
    }
            span {
                color: #55c3fc;
                font-family: 'HYRuiYiSongW';
                letter-spacing: -1px;
            }
            p {
                color: #fff;
                font-family: MicrosoftHimalaya;
            }
        }
    }
    // 中间地球
    .earth {
        background: url('../../static/image/earth.png') no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        top: 4%;
        left: 29%;
        right: 77%;
        width: 41%;
        height: 79%;
    } // 底部折线图
    .bottom_bs {
        width: 100%;
        height: 26%;
        position: absolute;
        bottom: 5px;
        .line_six {
            line-height: 47px;
            text-align: center;
            width: 100%;
            height: 20%;
            font-family: 'FZLTXHK--GBK1-0';
            font-size: 20px;
            color: #fff;
            background: url('../image/line_bs.png') no-repeat center;
            margin-bottom: 8px;
        }
        #line_chart {
            width: 50%;
            height: 220px;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }
    }
    .left_bs {
        float: left;
        width: 22.5%;
        height: 100%; // 今日采集总量
        .total_bs {
          text-align: center;
            .line_one {
                line-height: 47px;
                text-align: center;
                width: 100%;
                height: 47px;
                font-family: 'FZLTXHK--GBK1-0';
                font-size: 20px;
                color: #fff;
                background: url('../image/line_bs.png') no-repeat center;
                margin-bottom: 4%;
            }
            .number {
                display: inline-block;
                width: 10%;
                height: 39px;
                font-family: '1234567890-Regular';
                font-size: 45px;
                letter-spacing: 0px;
                color: #5b67ea;
            }
            .total_bottom {
                margin-top: 16px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding-right: 10%;
                .week_bs {
                    height: 20px;
                    line-height: 20px;
                    font-size: 20px;
                    color: #d1d6dc;
                    font-family: FZLTHK--GBK1-0;
                    letter-spacing: 0px;
                    margin-left: 33px;
                    display: inline-block;
                    white-space: nowrap;
                    .week {
                        margin-right: 8px;
                    }
                }
                .day_bs {
                    height: 20px;
                    line-height: 20px;
                    font-size: 20px;
                    letter-spacing: 0px;
                    color: #d1d6dc;
                    margin-left: 82px;
                    display: inline-block;
                    box-sizing: border-box;
                    white-space: nowrap;
                    .day {
                        margin-right: 6px;
                    }
                }
            }
        } // 各类目占比
        .proportion {
            margin-top: 35px;
            .line_two {
                line-height: 47px;
                text-align: center;
                width: 100%;
                height: 47px;
                font-family: 'FZLTXHK--GBK1-0';
                font-size: 20px;
                color: #fff;
                background: url('../image/line_bs.png') no-repeat center;
                margin-bottom: 30px;
            }
        } // 载体分布
        .carrier {
            margin-top: 28px;
            position: relative;
            .line_tress {
                line-height: 47px;
                text-align: center;
                width: 100%;
                height: 47px;
                font-family: 'FZLTXHK--GBK1-0';
                font-size: 20px;
                color: #fff;
                background: url('../image/line_bs.png') no-repeat center;
                margin-bottom: 35px;
            }
            .carrier-legend{
              width: 350px;
              bottom:14%;
              left:10%;
              position: absolute;
              ul{
                overflow: hidden;
                li{
                  margin-bottom:10px;
                  height:18px;
                  float: left;
                  margin-right: 20px;
                  span{
                    display: inline-block;
                    font-size :14px;
                    color: #6f87d6;
                    white-space: nowrap;
                  } 
                  .legendColor{
                    margin-right: 13px;
                    width :12px;
                    height: 8px;
                    border-radius :2px;
                  }
                  .legendName{
                    width:70px;
                    color: #6f87d6;
                  } 
                  .legendValue{
                    width: 60px
                  }
                   
              }
                }
                
              }
              
        }
    }
    // 右边
    .rigth_bs {
        float: right;
        width: 22.5%;
        height: 100%;
        // 实时情报
        .right_top {
            .line_four {
                line-height: 47px;
                text-align: center;
                width: 100%;
                height: 47px;
                font-family: 'FZLTXHK--GBK1-0';
                font-size: 20px;
                color: #fff;
                background: url('../image/line_bs.png') no-repeat center;
                margin-bottom: 7%;
            }
            .rigth_data {
                height: 490px;
                margin-left: 13%;
                li {
                    height: 48px;
                    span:nth-of-type(1) {
                        width: 5%;
                        height: 18px;
                        line-height: 18px;
                        border-radius: 50%;
                        display: @display;
                        text-align: center;
                        background-color: #0f2d5f;
                        color:#bfc1c5;
                    }
                    .bg{
                      background-color: #0b50c3!important
                    }
                    span:nth-of-type(2) {
                        width: 30%;
                        line-height: 17px;
                        display: inline-block;
                        font-size: 16px;
                        color: #6f87d6;
                        margin-left: 11%;
                        margin-right: 10%;
                        text-overflow:ellipsis;
                        overflow:hidden;
                        white-space:nowrap;
                    }
                    span:nth-of-type(3) {
                        height: 13px;
                        font-size: 16px;
                        letter-spacing: 0px;
                        color: #6f87d6;
                    }
                }
            }
            
        }
        // 热门搜索
        .right_bottom {
          text-align: center;
            .line_five {
                line-height: 47px;
                text-align: center;
                width: 100%;
                height: 47px;
                font-family: 'FZLTXHK--GBK1-0';
                font-size: 20px;
                color: #fff;
                background: url('../image/line_bs.png') no-repeat center;
                margin-bottom: 4%;
            }
            .right_search {
                position: relative;
                height: 324px;
                width: 385px;
                .circleText {
                    position: absolute;
                    top: 35%;
                    left: 31%;
                    font-size: 14px;
                    font-family: "FZLTHK--GBK1-0";
                    color: #ffffff;
                }
            }
        }
    }
}
